
<template>
	<div class="layout-admin-wrapper">
		<div class="layout-container-vertical fixed">
			<LayoutSideBar/>
			<div class="layout-main" :class='{ "is-collapse": collapse}'>
					<!-- Header -->
					<div	class="layout-header fixed-header"
						:class="{'is-collapse': collapse}">
						<LayoutNavBar/>
						<LayoutTabsBar/>
					</div>

					<div class="app-main-container">
						<LayoutMain />
						<LayoutFooter/>
					</div>
			</div>
			<!--主题切换-->
			<ThemeDrawer/>
		</div>
	</div>
</template>

<script setup lang="ts">
import LayoutMain from './Main/index.vue'
import LayoutFooter from './Footer/index.vue'
import LayoutSideBar from './SideBar/index.vue'
import LayoutNavBar from './NavBar/index.vue'
import ThemeDrawer from './NavBar/components/ThemeDrawer/index.vue'
import LayoutTabsBar from './TabsBar/index.vue'

import {computed, ref} from "vue";
import {useSettingsStoreWithOut} from "@/stores/modules/settings";

	const settingsStore = useSettingsStoreWithOut()
	const collapse= computed(()=> settingsStore.collapse)

</script>

<style scoped lang="scss">
@mixin fix-header {
	position: fixed;
	top: 0;
	right: 0;
	z-index: $base-z-index - 2;
	width: calc(100% - $base-left-menu-width);
}

.layout-admin-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: auto;

	.layout-container-vertical {
		&.fixed {
			padding-top: calc(#{$base-top-bar-height} + #{$base-tabs-bar-height});
		}

		.layout-main {
			min-height: 100%;
			margin-left: $base-left-menu-width;

			&.is-collapse {
				margin-left: $base-left-menu-width-min;
				border-right: 0;
			}

			.layout-header {
				box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

				&.fixed-header {
					@include fix-header;
				}

				&.is-collapse {
					width: calc(100% - $base-left-menu-width-min);
				}
			}

			.app-main-container {
				padding: 20px;
			}
		}
	}
}
</style>